<template>
  <el-row>
    <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :cell-style="{height:'.1vh',padding:'1px'}"
        :row-style="{height:'.1vh'}"
        :header-cell-style="{height:'.1vh',padding:'1px'}"
        :border="true"
    >

      <el-table-column
          fixed
          prop="freq"
          label="频点"
          width="80"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="name"
          label="音频"
          width="80"
          align="center"
      >
        <template slot-scope="scope">
          <a @click="openAudioPlayer(scope.row)" style="color: rgb(96, 98, 102)">
            <i
                :class="{
                'el-icon-error':!(scope.row.recordExist),
                'el-icon-video-play':scope.row.recordExist
          }">
            </i></a>
        </template>
      </el-table-column>

      <el-table-column
          prop="mobile__name"
          label="上报设备"
          width="120"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="category__name"
          label="种类"
          width="100"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="time"
          label="发现时间"
          width="200"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="address"
          label="发现地点"
          width="280"
          :resizable="true"
          :show-overflow-tooltip="true"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="common"
          label="备注"
          width="120"
          align="center"
      >
      </el-table-column>

      <el-table-column
          prop="contact"
          label="广告联系方式"
          width="120"
          align="center"
      >
      </el-table-column>

      <el-table-column
          label="修改"
          width="80"
          align="center"
          fixed="right"
      >
        <template slot-scope="scope">
          <el-button
              @click="editRow(scope.row)"
              type="primary"
              size="mini">
            修改
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <Pagination
        style="margin-top: 1vh"
        :total="total"
        :resetFlag="resetFlag"
        @currentChange="currentChange"
    />

    <!--  弹窗  -->

    <!--  黑广播信息审核  -->
    <Dialog
        :visiable="isEditVisiable"
        :info="{title:'黑广播信息审核',width:'25%'}"
        :top="'5%'"
        @close="isEditVisiable=false"
    >
      <EditForm
          :info="editForm"
          @editSucceed="editSucceed"
      />
    </Dialog>

    <Dialog
        :visiable="audioPlayerVisiable"
        @close="audioPlayerVisiable=false"
        :info="{title:'音频播放',width:'25%'}"
        :top="'5%'"
    >
      <audio controls :src="audioPath">
        您的浏览器不支持 audio 标签。
      </audio>
    </Dialog>
  </el-row>
</template>

<script>
// ---------------- axios -----------------
import {getBlackBoard, getBlackBoardRegion} from "../../../../../api/blackboard"
// --------------- element-ui -------------
import Pagination from "../../../../../components/element-ui/Pagination";
import Dialog from "../../../../../components/element-ui/dialog"
// ----------------- 组件 -------------------
import EditForm from "./editForm"

export default {
  components: {
    Pagination, Dialog, EditForm
  },
  methods: {
    // --------------- axios --------------------

    /**
     * 获取黑广播
     */
    getBlackBoard: function () {
      const pd = {
        page: this.page,
        limit: this.limit,
      }
      this.loading = true;
      getBlackBoard(pd)
          .then(res => {
            this.loading = false;
            this.updateTableData(res.data.data);
            this.total = res.data.count;
            this.needSelect = false;
          })
          .catch(err => {
            this.loading = false;
            console.error(err)
          })
    },

    /**
     * 按区域获取黑广播信息
     * */
    getBlackBoardRegion: function (pd) {
      this.loading = true;
      getBlackBoardRegion(pd)
          .then(res => {
            this.loading = false;
            this.updateTableData(res.data.data);
            this.total = res.data.count;
            this.needSelect = true;
          })
          .catch(err => {
            this.loading = false;
            console.error(err)
          });
    },

    //  -------------- 更新表格数据 ------------------

    /**
     * 更新表格数据
     * @param dataContent
     */
    updateTableData: function (dataContent) {
      this.tableData = dataContent
    },

    //  --------------- 功能 ------------------

    /**
     * 编辑行
     * @param row
     */
    editRow: function (row) {
      this.isEditVisiable = true;
      this.editForm = row;
    },

    /**
     * 翻页
     * @param val
     */
    currentChange: function (val) {
      this.page = val.currentPage;
      this.limit = val.pageSize;
      if (this.needSelect) {
        const pd = {
          page: this.page,
          limit: this.limit,
          time: this.time,
          adcode: this.adcode
        }
        this.getBlackBoardRegion(pd);
      } else {
        this.getBlackBoard();
      }
    },

    /**
     * 修改成功
     */
    editSucceed: function () {
      this.getBlackBoardRegion();
      this.isEditVisiable = false;
      this.editFlag = !this.editFlag;
    },

    /**
     * 播放音频
     * @param row
     */
    openAudioPlayer: function (row) {
      if (row.recordExist) {
        this.audioPlayerVisiable = true;
        this.audioPath = row.record
      }
    }

  },
  data() {
    return {
      tableData: [], // 表格数据
      loading: false, // 加载
      // -------------- 弹窗 ---------------
      isEditVisiable: false,
      audioPlayerVisiable: false,
      // -------------- 分页相关 -------------------
      total: 100,
      page: 1,
      limit: 10,
      needSelect: false,
      resetFlag: false,
      //  ---------------- 修改表单 ---------------
      editForm: {},
      //   -------------- 音频文件路径 ----------
      audioPath: ""
    }
  },
  created() {
    this.getBlackBoard();
    // this.getBlackBoardRegion();
  },
  props: {
    time: {
      type: Number,
      default: -1
    },
    adcode: {
      type: Number,
      default: undefined
    }
  },
  watch: {
    time: function () {
      const pd = {
        page: 1,
        limit: this.limit,
        time: this.time,
        adcode: this.adcode
      }
      this.getBlackBoardRegion(pd);
    },
    adcode: function (val) {
      this.resetFlag = !this.resetFlag;
      if (val === undefined) {
        this.page = 1;
        this.getBlackBoard();
      } else {
        this.page = 1;
        const pd = {
          page: 1,
          limit: this.limit,
          time: this.time,
          adcode: this.adcode
        }
        this.getBlackBoardRegion(pd);
      }
    }
  }
}
</script>

<style>

</style>